<template>
  <div style="padding: 10px">
    <el-form
      ref="elForm"
      :model="searchData"
      size="medium"
      inline
    >
      <el-form-item>
        <el-button
          type="primary"
          v-hasPermi="['business:craftInfo:add']"
          size="mini"
          @click="addOrEdit(0)"
        >新增工序</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="danger"
          size="mini"
          v-hasPermi="['business:craftInfo:export']"
          @click="exportProduct()"
        >导出表格</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      v-loading="tableLoading"
      border
    >
      <el-table-column width="50" align="center" type="index" label="序号">
      </el-table-column>
      <el-table-column
        prop="craftName"
        label="工序名称"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="craftRemark" label="工序备注" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            slot="reference"
            @click="addOrEdit(scope.row)"
            type="text"
            size="small"
          >编辑</el-button
          >

          <el-button
            type="text"
            size="small"
            @click="removeCraft(scope.$index, scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogTitle + '工序'"
      :visible.sync="addDialog"
      width="30%"
    >
      <el-form :model="edit" ref="edit" :rules="editRules" label-width="98px">
        <el-form-item label="工序名称" prop="craftName">
          <el-input
            v-model="edit.craftName"
            placeholder="请输入工序名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="工序备注" prop="craftRemark">
          <el-input
            v-model="edit.craftRemark"
            type="textarea"
            :rows="2"
            placeholder="请输入工序备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
    </el-dialog>
    <el-pagination
      style="margin-top: 15px"
      align="center"
      :hide-on-single-page="false"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="10"
      :current-page="searchData.pageNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  getCraftInfoListApi,
  deleteCraftInfoApi,
  addCraftInfoApi,
  updateCraftInfoApi,
} from "@/api/craftInfo/craftInfo.js";
export default {
  components: {},
  computed: {},
  data() {
    return {
      tableLoading: true,
      tableData: [],
      total: 0,
      searchData: {
        pageNum: 1,
        pageSize: 10,
      },
      dialogTitle: "",
      addDialog: false,
      edit: {},
      // 表单校验
      editRules: {
        craftName: [
          { required: true, message: "请输入工序名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getCraftInfoPagingList();
  },
  methods: {
    // 查询工序列表分页
    async getCraftInfoPagingList(page) {
      try {
        this.searchData.pageNum = page == null ? this.searchData.pageNum : page;
        const res = await getCraftInfoListApi(this.searchData);
        this.tableData = res.data.list;
        this.total = res.data.total;
      } catch (error) {
      } finally {
        this.tableLoading = false;
      }
    },
    //分页修改每页显示条数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getCraftInfoPagingList();
    },
    //分页跳转页面
    handleCurrentChange(val) {
      this.searchData.pageNum = val;
      this.getCraftInfoPagingList();
    },
    clearForm() {
      this.searchData.craftName = "";
      this.getCraftInfoPagingList(1);
    },
    // 判断当前点击的是新增还是编辑
    addOrEdit(row) {
      console.log(row);
      if (row === 0) {
        this.addDialog = true;
        this.dialogTitle = "新增";
        this.edit = {};
      } else {
        this.addDialog = true;
        this.dialogTitle = "编辑";
        // this.edit = row // 编辑需要回显数据
        this.edit = JSON.parse(JSON.stringify(row)); //深拷贝
      }
    },
    onSubmit() {
      this.$refs["edit"].validate((valid) => {
        if (!valid) return;
        console.log(this.dialogTitle);
        if (this.dialogTitle == "新增") {
          this.addCraft();
        } else {
          console.log(this.edit);
          this.editCraft();
        }
      });
    },
    // 新增工序
    async addCraft() {
      const res = await addCraftInfoApi(this.edit);
      console.log(res);
      this.$message.success("新增成功");
      this.getCraftInfoPagingList(1);
      this.handleCancel();
    },

    // 修改工序
    async editCraft() {
      const { craftName, craftRemark, pkCraftInfo } = this.edit;
      const res = await updateCraftInfoApi({
        craftName,
        craftRemark,
        pkCraftInfo,
      });
      console.log(res);
      this.$message.success("修改成功");
      this.getCraftInfoPagingList(1);
      this.handleCancel();
    },

    // 删除工序
    async removeCraft(index, row) {
      try {
        await deleteCraftInfoApi(row.pkCraftInfo);
        this.$message.success("移除成功");
        this.tableData.splice(index, 1);
      } catch (error) {
        this.$message.error("移除失败");
      }
    },

    // 取消清空弹窗操作
    handleCancel() {
      this.addDialog = false;
      this.$refs.edit.clearValidate(); // 取消需要清空表单校验（当前的表单用到了校验）
      this.edit = Object.assign(
        {},
        {
          // 清空表单数据
          craftName: "",
          craftNums: "",
          craftTotalPrice: "",
          craftRemark: "",
        }
      );
    },
    // 导出表格
    exportProduct() {
      this.download(
        "/business/craftInfo/export",
        {
          ...this.searchData,
        },
        `工序${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style></style>
